<template>
  <el-container class="app-container" direction="vertical">
    <el-row type="flex" justify="center">
      <el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23">
        <el-card class="el-card-carousel" style="border: none" :body-style="{ padding: '0px' }" shadow="hover">
          <el-carousel loop :interval="4000" indicator-position="outside" height="45vh">
            <el-carousel-item v-for="item in imageBox" :key="item.id">
              <!--            <el-image :src="item.url" class="image" alt="图片无法加载" />-->
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" style="display: flex;justify-content:center;">
        <el-card class="upload-demo__card" shadow="hover" style="display: flex;justify-content:center;margin-top: 50px">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture"
          >
            <i class="el-icon-upload" />
            <el-tooltip class="el_tooltip_carousel_item" effect="light" placement="right" transition="el-zoom-in-center">
              <div slot="content" class="el-upload__tooltip">只能上传jpg/png文件，且不超过500kb</div>
              <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
              <!--        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
            </el-tooltip>
          </el-upload>
        </el-card>
      </el-col>
    </el-row>
    <!--    <el-row type="flex" justify="center">
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          &lt;!&ndash;width: 320px;&ndash;&gt;
          <el-button style="height: 65px;margin-top: 30px" @click="handleDownload">
            点击上传图片
            <i class="el-icon-upload el-icon&#45;&#45;right" />
            <el-tooltip class="el-tooltip_item" effect="light" content="只能上传jpg/png文件" placement="right">
              <i class="el-icon-info" />
            </el-tooltip>
          </el-button>
        </el-upload>
      </el-col>
    </el-row>-->
  </el-container>
</template>

<script>
import { changeCarousel, getCarousel } from '@/api/base/carousel'

export default {
  data() {
    return {
      imageBox: [{
        id: 0,
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        id: 1,
        name: 'food2.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }, {
        id: 2,
        name: 'food3.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
      }],
      temp: {
        id: undefined,
        name: '',
        url: ''
      }
    }
  },
  created() {
    // Mock: get all permissions list from server
    this.getCarousels()
  },
  methods: {
    resetTemp() {
      this.temp = {
        id: undefined,
        name: '',
        url: ''
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    async getCarousels() {
      const res = await getCarousel()
      this.imageBox = res.data
    },
    handleDownload() {
      changeCarousel(this.temp).then(() => {
        this.list.unshift(this.temp)
        this.$notify({
          title: '成功',
          message: '上传成功',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
/*.app-container{
  margin: 30px 2rem;
  border-radius: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}*/

/*.image {
  width: 800px;
  height: 500px;
  background-size: 100% 100%;
  // text-align: center;
}*/

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.upload-demo__card:hover{
  border: 2px solid #08f;
  -webkit-transform: translateY(-8px);
  transform: translateY(-20px);
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
}

.el-upload__tooltip{
  font-weight: 500;
  font-size: 18px;
  font-family: "微软雅黑 Light",serif;
}

.upload-demo .el-upload__text{
  font-size: 18px;
  font-weight: 530;
  font-family: "微软雅黑",serif;
  line-height: 1.7;
  margin-top: 8px;
}

/*.upload-demo {
  font-size: 40px;
  font-weight: 550;
  letter-spacing: 2px;
  // margin: 10px;
}

.el-upload__tip {
  margin-top: 10px;
  margin-left: 1rem;
  margin-bottom: 1rem;
  font-size: 14px;
  font-weight: 520;
  // letter-spacing: 1px;
}

.el-tooltip_item{
  margin-left: 10px;
}

button {
  background-color: #419fff;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 1.3em 3em;
  text-transform: uppercase;
  letter-spacing: 3.5px;
  font-weight: 550;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  margin-left: 0.8rem;
}

button:active {
  transform: translateY(-1px);
}

button:hover {
  background-color: #fff;
  color: #000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translateY(-7px);
  // background-color: #23c483;
}*/
</style>
